
<template>
  <div>
    <div class="table_wrap">
      <div class="table_title">
        <i class="el-icon-platform-eleme"></i>
        <div>学员管理</div>
      </div>
      <el-table :data="studentList"
                border
                style="width:100%;">
        <el-table-column label="用户名"
                         prop="userName"
                         width="180">
        </el-table-column>
        <el-table-column label="邮箱"
                         prop="email"
                         width="180">
        </el-table-column>
        <el-table-column label="手机号"
                         prop="phone"
                         width="180">
        </el-table-column>
        <el-table-column label="注册日期"
                         width="180">
          <template slot-scope="scope">
            <div>
              {{new Date(scope.row.createAt).toLocaleString()}}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="状态"
                         width="280">
          <template slot-scope="scope">
            <div>
              {{scope.row.isstate?"已冻结":"可用"}}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作"
                         width="280">
          <template slot-scope="scope">
            <div>
              <el-button @click="lock(scope.row.tokenId)"
                         :type="scope.row.isstate?'success':'primary'">{{scope.row.isstate?"解冻":"冻结"}}</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="page_wrap">
        <el-button type="success"
                   @click="goTop">首页</el-button>
        <el-pagination :pageSize="pageSize"
                       :total="total"
                       background
                       layout="prev,pager,next"
                       :current-page="pageStart"
                       @current-change="pageChange">

        </el-pagination>
        <el-button type="primary"
                   @click="goEnd">尾页</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapActions, mapMutations } from 'vuex'
import { lockUserApi } from '../../api/student'
export default {
  name: "stuendtTable",
  data () {
    return {}
  },
  created () {
    // 获取学员列表
    this.getStudentAction({ pageStart: this.pageStart })

  },
  methods: {
    ...mapMutations("studentStore", ["changePage"]),
    ...mapActions("studentStore", ["getStudentAction"]),
    async lock (id) { //冻结解冻方法
      var res = await lockUserApi(id)
      if (res.success) {
        this.$alert("操作成功")
      }
      // 调取当前页数据
      this.getStudentAction({ pageStart: this.pageStart })
    },
    pageChange (val) {  //分页改变事件
      console.log(val)
      this.changePage(val)//改变pageStart
      this.getStudentAction({ pageStart: val })  //加载当前页码数据
    },
    goTop () {//跳转首页
      this.changePage(1) //改变当前页码为1
      this.getStudentAction({ pageStart: 1 })
    },
    goEnd () {//跳转尾页
      this.changePage(this.endPage)//改变当前页码为尾页
      this.getStudentAction({ pageStart: this.endPage })
    }
  },
  computed: {
    ...mapGetters("studentStore", ["studentList", "pageSize", "pageStart", "total", "endPage"])
  }
}
</script>
<style lang="less">
.table_wrap {
  width: 1300px;
  margin: 10px auto;
  background: white;
  .table_title {
    height: 40px;
    line-height: 40px;
    display: flex;
    border: 1px solid black;
    i {
      width: 40px;
      height: 40px;
      border-right: 1px solid black;
      font-size: 40px;
    }
    div {
      margin-left: 30px;
    }
  }
}
th {
  background: #ccc !important;
}
.page_wrap {
  width: 1300px;
  margin: 10px auto;
  display: flex;
  .el-button {
    height: 28px;
    line-height: 4px;
  }
}
</style>